<template>
  <div>
    <h1>App</h1>

    {{ gender }}
    <hr>
    {{ formatGender(gender) }}
    <hr>
    {{ fGender }}
    <hr>
    <!-- fGender(gender) -->
    {{ gender | fGender }}
    <hr>
    <!-- add(100,10) -->
    {{ 100 | add(20) }}
    <hr>
    {{ 100 | add(20) | add(30) | sub(1) }}

    <hr>

    {{ 'hello' | abc }}

    <hr>

    <TsInput></TsInput>
    <TsBox></TsBox>

  </div>
</template>
<script>
export default {
  filters: {
    sub(v, a = 0) {
      return v - a
    },
    add(v, a = 0) {
      return v + a
    },
    fGender(g) {
      return g === 1 ? '男' : '女'
    }
  },
  data() {
    return {
      gender: 1
    }
  },
  computed: {
    fGender() {
      return this.gender === 1 ? '男' : '女'
    }
  },
  methods: {
    formatGender(g) {
      return g === 1 ? '男' : '女'
    }
  }
}
</script>

<style>
div {
  padding: 10px;
  margin: 10px;
  border: solid;
}
</style>